<template>
	<view class="page-goods-detail page-wrap has-combtn-padding">
		<image src="https://www.moguigame.com/static/shop/back-black.png" class="back-img" @click="toBack" mode=""></image>
		<view class="swiper-wrap">
			<swiper :indicator-dots="false" indicator-color="rgba(255,255,255,0.5)" @change="handleChange"
				indicator-active-color="#fff" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in detailData.images" :key="item.id">
					<image class="swiper-item" :src="item" mode="aspectFill"></image>
				</swiper-item>

			</swiper>
			<div class="swiper-dot-wrap">{{ currentId }}/{{ detailData.images.length }}</div>
		</view>
		<view class="detail-card">
			<view class="detail-title line-2">{{ detailData.title }}</view>
			<view class="text-price text-red">{{ detailData.price ? detailData.price[0] : '' }}</view>
		</view>


		<view class="detail-card">
			<view class="detail-card-title">用户评价
				<view class="flex align-center text-gray" @click="toEva">
					全部
					<image src="https://www.moguigame.com/static/shop/right-arr.png" class="right-arr-img" mode=""></image>
				</view>
			</view>
			<view class="evaluate-item" v-for="item in commenData" :key="item.id">
				<image :src="item.user_avatar" class="evaluate-item-ava" mode="aspectFill"></image>
				<view class="evaluate-item-info">
					<view class="evaluate-item-name">{{ item.user_nickname }}</view>
					<view class="evaluate-item-con">{{ item.content }}</view>
				</view>
			</view>
		</view>

		<view class="detail-card">
			<view class="detail-card-title">商品介绍
			</view>
			<view class="detail-rich-wrap">
				<view v-html="detailData.content"></view>
			</view>
		</view>


		<view class="detail-footer">
			<view class="footer-wrap">
				<view class="flex align-center justify-between footer-wrap-left">
					<view class="footer-wrap-handle" @click="toCollect" v-if="!detailData.favorite">
						<image src="https://www.moguigame.com/static/shop/collection.png" class="icon-44" mode=""></image>
						<view>收藏</view>
					</view>
					<view class="footer-wrap-handle" @click="toCollect" v-if="detailData.favorite">
						<image src="https://v3.shopro.top/assets/addons/shopro/uniapp/goods/collect_1.gif" class="icon-44" mode="">
						</image>
						<view>已收藏</view>
					</view>
					<!-- #ifdef MP -->
					<view class="footer-wrap-handle">
						<image src="https://www.moguigame.com/static/shop/service.png" class="icon-44" mode=""></image>
						<view>客服</view>
						<button class="reset-btn" open-type="contact"></button>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view class="footer-wrap-handle">
						<image src="https://www.moguigame.com/static/shop/service.png" class="icon-44" mode=""></image>
						<view>客服</view>
					</view>
					<!-- #endif -->
          <view class="footer-wrap-handle" @click="toCart">
            <image src="/static/common/cart.png" class="icon-44" mode="aspectFill"></image>
            <view>购物车</view>
          </view>
				</view>
				<view class="flex align-center justify-between footer-wrap-right">
					<view class="cu-btn round line" @click="toAddCart">加入购物车</view>
					<view class="cu-btn round btn-buy" @click="toBuy">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detailData: {
				images: []
			},
			currentId: 1,
			commenData: [],
      goodsId: ''
		};
	},
	onLoad(options) {
    this.goodsId = options.goodsId
		this.getData()
		this.getComment()
	},
	methods: {
		async getData() {
			const res = await this.$Api.getShopGoodDetail({ id: this.goodsId })
			res.data.content = res.data.content.replaceAll('<image ', '<image style="width:100%;object-fit:cover;"')
			this.detailData = res.data
		},
		handleChange(event) {
			this.currentId = event.detail.current + 1
		},
		async getComment() {
			const res = await this.$Api.getShopGoodComment({ goods_id: this.goodsId, list_rows: 3 })
			this.commenData = res.data.data
		},
		toEva() {
			uni.navigateTo({
				url: '/pages/user/evaluate?goodsId=' + this.goodsId
			})
		},
		toBack() {
			uni.navigateBack()
		},
    toCart() {
      uni.navigateTo({
        url: '/pages/cart/cart'
      })
    },
		toBuy() {
			let paramtemp = {
				order_type: 'goods',
				from: 'goodsdetail',
				goods_list: [
					{
						'goods_id': this.detailData.id,
						'goods_num': 1,
						'goods_sku_price_id': this.detailData.sku_prices[0].id
					}
				]
			}
      const query = encodeURIComponent(JSON.stringify(paramtemp))
			uni.navigateTo({
				url: '/pages/confirmOrder/confirmOrder?data=' + query
			})
		},
		async toAddCart() {
			let res = await this.$Api.postUpdateCart({
				goods_id: this.goodsId,
				goods_num: 1,
				goods_sku_price_id: this.detailData.sku_prices[0].id,
				type: 'inc'
			})
			if (res.code == 1) {
				uni.showToast({
					title: '加入购物车成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		},
		async toCollect() {
			let res = await this.$Api.postFavorite({
				goods_id: this.goodsId
			})
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			this.getData();
		}
	}
}
</script>

<style lang="scss">
.page-goods-detail {
	position: relative;
	background-color: #f8f8f8;
	min-height: 100vh;

	.detail-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		background-color: #fff;

		.footer-wrap {
			height: 112rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;

			.icon-44 {
				margin-bottom: 2rpx;
			}

			.footer-wrap-handle {
				height: 80rpx;
				//width: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;
			}

			.footer-wrap-left {
				width: 232rpx;
        font-size: 12px;
			}

			.footer-wrap-right {
				margin-left: 32rpx;
				flex: 1;

				.cu-btn {
					width: 203rpx;
					height: 88rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
          padding: 0 20rpx;
				}

				.btn-buy {
					background: #7644FF;
					color: #fff;
				}
			}
		}
	}

	.back-img {
		height: 52rpx;
		width: 52rpx;
		position: fixed;
		top: 88rpx;
		left: 32rpx;
		z-index: 1;
	}

	.swiper-wrap {
		margin: 0 auto;
		position: relative;
		padding-bottom: 16rpx;

		.swiper-dot-wrap {
			width: 70rpx;
			height: 42rpx;
			background: rgba(0, 0, 0, 0.7);
			border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	swiper {
		width: 100%;
		height: 800rpx;
		margin: 30rpx auto 0;
	}

	.swiper-item {
    width: 100%;
		height: 800rpx;
		margin: 0 auto;
		display: block;
		// border-radius: 16rpx;
		overflow: hidden;
	}

	.detail-card {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx;
		background-color: #fff;
		// margin: 16rpx auto 0;
	}

	.detail-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.text-price {
		font-family: DIN, DIN;
		font-weight: bold;
		font-size: 44rpx;
		color: #FF2E00;
	}

	.detail-card-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.right-arr-img {
			height: 36rpx;
			width: 36rpx;
		}
	}

	.evaluate-item {
		display: flex;
		margin-top: 48rpx;
	}

	.evaluate-item-ava {
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		min-width: 80rpx;
	}

	.evaluate-item-info {
		margin-left: 16rpx;
	}

	.evaluate-item-name {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.evaluate-item-con {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin-top: 8rpx;
	}

	.detail-rich-wrap {
		min-height: 40vh;
		margin-top: 24rpx;

		img {
			width: 100% !important;
		}
	}
}
</style>
